import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import TabTemplate from './tabTemplate';
import './tabs.scss';
import Icon   from  '../icons/icons.js';

class Tabs extends Component {
  static propTypes = {
  };

  static defaultProps = {
    currentIndex: 0
  };
  constructor(props) {
    super(props);

    this.state = {
      currentIndex : 0
    };
  }

  getTitleItemCssClasses(index){
    return index === this.state.currentIndex ? "tab-title-item active" : "tab-title-item";
  }
  
  getContentItemCssClasses(index){
    return index === this.state.currentIndex ? "tab-content-item active" : "tab-content-item";
  }

  render() {
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;

    return (
      <div className="tabs-paper">
        <div className="tab-title-items">
          {React.Children.map(this.props.children, (element, index) => {
            return (
              <div onClick={() => {this.setState({currentIndex: index})}} 
              className={that.getTitleItemCssClasses(index)}
              >
              <span className="icon-s"><Icon klass={element.props.icon}></Icon></span>
              {element.props.name}</div>
              )
          })}
        </div>
        <div className="tab-content-items">
          {React.Children.map(this.props.children, (element, index) => {
            return (<div className={that.getContentItemCssClasses(index)}>{element}</div>)
          })}  
        </div>
      </div>
    );
  }
}

export default Tabs;
